<!doctype html>
<meta charset=utf-8>
<title></title>
<div id=log></div>
<div id="parent" style="overflow:scroll; height: 100px; position: relative">
  <div id="spacer" style="height: 200px"></div>
  <div id="child"></div>
  <div id="absolute-child" style="position: absolute; top: 41px; left: 43px"></div>
</div>
<script>
    {
        var child = document.getElementById("child");
        assert_equals(child.offsetTop, 200, "Child is after spacer");
        assert_equals(child.offsetLeft, 0, "Child is flush left");
        var absChild = document.getElementById("absolute-child");
        assert_equals(absChild.offsetTop, 41, "Abspos child is y-positioned");
        assert_equals(absChild.offsetLeft, 43, "Abspos child is x-positioned");
    }

    {
        var parent = document.getElementById("parent");
        parent.scrollTop = 100;
        var child = document.getElementById("child");
        assert_equals(child.offsetTop, 200, "Child is after spacer");
        assert_equals(child.offsetLeft, 0, "Child is flush left");
        var absChild = document.getElementById("absolute-child");
        assert_equals(absChild.offsetTop, 41, "Abspos child is y-positioned");
        assert_equals(absChild.offsetLeft, 43, "Abspos child is x-positioned");
    }

    {
        var child = document.getElementById("child");
        child.style.marginTop = "20px"
        child.style.marginLeft = "100px";
        assert_equals(child.offsetTop, 220, "Child is after spacer and margin");
        assert_equals(child.offsetLeft, 100, "Child is 100px from left");
        var absChild = document.getElementById("absolute-child");
        absChild.style.marginTop = "20px"
        absChild.style.marginLeft = "100px";
        assert_equals(absChild.offsetTop, 61, "Abspos child is y-positioned and has margin");
        assert_equals(absChild.offsetLeft, 143, "Abspos child is x-positioned and has margin");
    }

    {
        var parent = document.getElementById("parent");
        parent.style.marginTop = "66px"
        parent.style.marginLeft = "33px";
        var child = document.getElementById("child");
        assert_equals(child.offsetTop, 220, "Child is after spacer and margin");
        assert_equals(child.offsetLeft, 100, "Child is 100px from left");
        var absChild = document.getElementById("absolute-child");
        assert_equals(absChild.offsetTop, 61, "Abspos child is y-positioned and has margin");
        assert_equals(absChild.offsetLeft, 143, "Abspos child is x-positioned and has margin");
    }

    {
        var child = document.getElementById("child");
        child.style.borderTop = "13px solid green";
        child.style.borderLeft = "7px solid green";
        assert_equals(child.offsetTop, 220, "Child is after spacer and margin");
        assert_equals(child.offsetLeft, 100, "Child is 100px from left");
        var absChild = document.getElementById("absolute-child");
        absChild.style.borderTop = "13px solid green";
        absChild.style.borderLeft = "7px solid green";
        assert_equals(absChild.offsetTop, 61, "Abspos child is y-positioned and has margin");
        assert_equals(absChild.offsetLeft, 143, "Abspos child is x-positioned and has margin");
    }

    {
        var parent = document.getElementById("parent");
        parent.style.borderTop = "23px solid yellow";
        parent.style.borderLeft = "19px solid yellow";
        var child = document.getElementById("child");
        assert_equals(child.offsetTop, 220, "Child is after spacer and margin");
        assert_equals(child.offsetLeft, 100, "Child is 100px from left");
        var absChild = document.getElementById("absolute-child");
        assert_equals(absChild.offsetTop, 61, "Abspos child is y-positioned and has margin");
        assert_equals(absChild.offsetLeft, 143, "Abspos child is x-positioned and has margin");
    }


    {
        var child = document.getElementById("child");
        child.style.paddingTop = "31px";
        child.style.paddingLeft = "37px";
        assert_equals(child.offsetTop, 220, "Child is after spacer and margin");
        assert_equals(child.offsetLeft, 100, "Child is 100px from left");
        var absChild = document.getElementById("absolute-child");
        absChild.style.paddingTop = "31px";
        absChild.style.paddingLeft = "37px";
        assert_equals(absChild.offsetTop, 61, "Abspos child is y-positioned and has margin");
        assert_equals(absChild.offsetLeft, 143, "Abspos child is x-positioned and has margin");
    }

    {
        var parent = document.getElementById("parent");
        parent.style.paddingTop = "31px";
        parent.style.paddingLeft = "37px";
        var child = document.getElementById("child");
        assert_equals(child.offsetTop, 251, "Child is after spacer and margin and parent padding");
        assert_equals(child.offsetLeft, 137, "Child is 100px + parent padding from left");
        var absChild = document.getElementById("absolute-child");
        // Padding on the parent does not affect the position of the absolute containing block.
        assert_equals(absChild.offsetTop, 61, "Abspos child is y-positioned and has margin");
        assert_equals(absChild.offsetLeft, 143, "Abspos child is x-positioned and has margin");
    }
</script>